<template>
  <div class="page_main">
    <canvas ref="cavs" width="500" height="500"></canvas>
    <section class="info_box" v-if="false">
      <div class="info_wrap" :style="item.style" v-for="(item,index) in points" :key="index">
        <aside class="info" :class="'item'+index">
          <aside class="name">得分</aside>
          <aside class="name">得分</aside>
        </aside>
      </div>
    </section>
  </div>

</template>

<script>
import {getRandomNumber} from "./base.js";
// 网格信息
const GRID_LINE_COLOR = "rgba(199,199,199,0.3)";
const GRID_LINE_WIDTH = 1;

// 区域信息
const POINT_LINE_COLOR = "#357BDF";
const POINT_R = 5;

const AREA_FILL_COLOR = 'rgba(57, 139, 255, 0.3)';
const AREA_STROKE_COLOR = '#398BFF';
const AREA_LINE_WIDTH = 2;



export default {
  name: "canvasTest",
  data() {
    return {
      isBegin: false,
      ball: {},
      angle: 0,
      maxR: 250,
      gridGap: 50,
      gridNumber: 5,
      points: []
    };
  },
  mounted() {
    let self = this;
    let canvas = this.$refs.cavs;
    let ctx = canvas.getContext("2d");
    let center = {
      x: canvas.width / 2,
      y: canvas.height / 2
    };

    let circleList = [25, 50, 75, 100, 125];
    let dataLength = circleList.length;

    ctx.translate(center.x, center.y);

    ctx.lineWidth = 4;
    ctx.strokeStyle = "rgba(199,199,199,0.3)";
    ctx.fillStyle = "rgba(57, 139, 255, 0.3)";

    // circleList.map((R, index) => {
    //   ctx.moveTo(this.gridGap * (index + 1), 0);
    //   ctx.arc(0, 0, R, 0, Math.PI * 2);
    // });
    // ctx.stroke();

    //  内部的点
    let points = [];
    for (let i = 0; i < 5; i++) {
      let obj = {};
      obj.rate = getRandomNumber(this.maxR * 0.4, this.maxR);
      points.push(obj);
    }
    this.points = points;

    let startAngle = -Math.PI * 0.5;
    let gapAngle = (Math.PI * 2) / points.length;

    ctx.beginPath();
    ctx.rotate(startAngle);

    this.drawGrid(ctx, points, gapAngle);

    this.drawHelpLineByPoints(ctx, points, gapAngle); // 参考线
    ctx.beginPath();
    this.drawLineByPoints(ctx, points, gapAngle); // 点
    this.drawCircleByPoints(ctx, points, gapAngle); // 线
    this.setPosition(points, gapAngle); // 计算信息展示坐标
  },
  methods: {
    drawGrid(ctx, points, gapAngle) {
      ctx.save();
      ctx.lineWidth = GRID_LINE_WIDTH;
      ctx.strokeStyle = GRID_LINE_COLOR;
      for (let i = 0; i < this.gridNumber; i++) {
        let curR = this.gridGap * (i + 1);
        ctx.moveTo(curR, 0);
        points.map((item, index) => {
          ctx.rotate(gapAngle);
          ctx.lineTo(curR, 0);
        });
      }
      ctx.stroke();
      ctx.restore();
    },
    setPosition(points, gapAngle) {
      let wRate = window.innerWidth / 750;
      let R = 200 * wRate;
      this.points.map((item, index) => {
        let x = R * Math.cos(gapAngle * index - Math.PI * 0.5);
        let y = R * Math.sin(gapAngle * index - Math.PI * 0.5);
        console.log(gapAngle, x, y);
        item.style = {
          left: x + "px",
          top: y + "px"
        };
      });
    },
    drawHelpLineByPoints(ctx, points, gapAngle) {
      ctx.save();
      points.map((item, index) => {
        ctx.rotate(gapAngle);
        let testR = this.maxR;
        ctx.moveTo(0, 0);
        ctx.lineTo(testR, 0);
      });
      ctx.stroke();
      ctx.restore();
    },
    drawLineByPoints(ctx, points, gapAngle) {
      ctx.save();
      points.map((item, index) => {
        ctx.rotate(gapAngle);
        let testR = item.rate;
        let point = {
          x: testR,
          y: 0
        };
        if (index === 0) {
          ctx.moveTo(testR, 0);
          return;
        }
        ctx.lineTo(testR, 0);
      });
      ctx.closePath();
      ctx.strokeStyle = AREA_STROKE_COLOR;
      ctx.fillStyle = AREA_FILL_COLOR;
      ctx.fill();
      ctx.stroke();
      ctx.restore();
    },
    drawCircleByPoints(ctx, points, gapAngle) {
      ctx.save();
      ctx.fillStyle = POINT_LINE_COLOR;
      points.map((item, index) => {
        ctx.beginPath();
        ctx.rotate(gapAngle);
        let testR = item.rate;
        let point = {
          x: testR,
          y: 0
        };
        if (index === 0) {
          ctx.arc(point.x, point.y, POINT_R, 0, Math.PI * 2);
          ctx.fill();
          ctx.stroke();
          return;
        }
        ctx.arc(point.x, point.y, POINT_R, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();
      });
      ctx.closePath();
    }
  }
};
</script>

<style lang="less" scoped>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.page_main {
  position: relative;
  margin: 0.2rem auto;
  width: 5rem;
  height: 5rem;
  background: #f8f8f8;
  canvas {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border: 0.1rem solid red;
    box-sizing: border-box;
  }

  .info_box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    // box-shadow: 0 0 10px 10px #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .info_wrap {
    position: absolute;
    width: 10px;
    height: 10px;
    background: red;
  }

  .info_wrap .info {
    position: absolute;
    width: 1rem;
    height: 1rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: red;
    line-height: 1rem;
    text-align: center;
    font-size: 0.5rem;
    color: yellow;
    font-weight: bold;
  }
}
</style>
